<template>
  <div>
  <div class="select-num" v-for="(it,index) in items" :key="index">
    <input-plane :icon="icon" :label="label" :color="color">
      <div class="main">
        <div class="select" @click="select(index)">
          <span class="val">{{it.text}}</span>
          <span class="iconfont icondown"></span>
        </div>
        <div class="icon">
          <div v-if="!item">
            <span @click="add" v-if="index===items.length-1" class="iconfont iconjia"></span>
            <span @click="del(index)" v-else class="iconfont iconlaji"></span>
          </div>
        </div>
      </div>
    </input-plane>
  </div>
  </div>
</template>

<script>
import inputPlane from '../../components/base/input-plane'

export default {
  created () {
    if (this.item) {
      this.items.push(this.item)
    }
  },
  data () {
    return {
    }
  },
  props: {
    label: String,
    icon: String,
    color: String,
    type: String,
    options: Array,
    alias: Object,
    items: {
      type: Array,
      default: function () {
        return []
      }
    },
    item: Object
  },
  components: {
    inputPlane
  },
  methods: {
    add () {
      this.items.push({})
    },
    del (index) {
      this.items.splice(index, 1)
    },
    change (selectedVal, selectedIndex, selectedText, index) {
      this.$set(this.items[index], 'text', selectedText.join())
      this.$set(this.items[index], 'value', selectedVal.join())
      this.$emit('change', selectedText.join(), selectedVal.join())
    },
    select (index) {
      this.$createPicker({
        title: this.label,
        data: [this.options],
        onSelect: (selectedVal, selectedIndex, selectedText) => this.change(selectedVal, selectedIndex, selectedText, index),
        alias: this.alias
      }).show()
    }
  }
}
</script>

<style scoped lang="stylus">
  .select-num
    margin-top 15px
    .main
      display flex
      justify-content space-around
      position absolute
      top  0
      left 0
      right 0
      bottom 0
      padding 8px 10px
      .select
        width:131px;
        border:1px solid rgba(230,229,230,1);
        display flex
        align-items center
        justify-content space-between
        flex 1
        .iconfont
          margin-right 12px
          dpr-font(16px)
          color #989898
        .val
          padding-left 10px
          color #55545d
          dpr-font(16px)
      .icon
        width 40px
        flex 0 0 40px
        display flex
        align-items center
        justify-content center
        dpr-font(16px)
        color #009C4E
</style>
